<template>
  <div id="virtual-tree-list" class="VirtualTreeList">
    <virtual-list :size="itemHeight" :remain="itemNum">
      <template v-for="(item, index) in tableList">
        <div
          v-if="item.show && item.filter && item.search"
          :key="item.id"
          :class="activedDisabled && item.actived ? 'node-item node-label-active' : 'node-item'"
          :style="'padding-left:' + (item.level * 17) + 'px'"
          :data-index="index"
          :data-id="item.id"
          :data-level="item.level"
          :data-show="item.show"
          :data-filter="item.filter"
          :data-search="item.search"
          :data-actived="item.actived"
          :data-expanded="item.expanded"
          :data-checked="item.checked"
          :data-indeterminate="item.indeterminate"
          :data-leaf="item.leaf"
          :data-state="item.state"
          :data-disabled="item.disabled"
          @click.stop="vtl_handleNodeClick(item)"
        >
          <div class="node-operation">
            <span class="node-expand" v-if="showExpand" @click.stop>
              <i
                v-if="!item.leaf"
                :class="item.expanded ? 'node-expand-icon el-icon-caret-right node-expanded' : 'node-expand-icon el-icon-caret-right'"
                @click.stop="vtl_handleExpandClick(item)"
              ></i>
            </span>
            <span class="node-checkbox" v-if="showCheckbox" @click.stop>
              <div
                :data-disabled="filterCheckedDisabled(item, index)"
                :class="item.disabled ? 'node-checkbox-border node-checkbox-border-disabled' : 'node-checkbox-border'"
                @click.stop="vtl_handleCheckClick(item)"
              >
                <i
                  v-if="item.indeterminate"
                  :class="item.disabled ? 'node-checkbox-indeterminate node-checkbox-indeterminate-disabled' : 'node-checkbox-indeterminate'"
                ></i>
                <i
                  v-else-if="item.checked"
                  :class="item.disabled ? 'node-checkbox-checked node-checkbox-checked-disabled' : 'node-checkbox-checked'"
                ></i>
                <i
                  v-else
                  :class="item.disabled ? 'node-checkbox-normal node-checkbox-normal-disabled' : 'node-checkbox-normal'"
                ></i>
              </div>
            </span>
            <span class="node-icon" v-if="showIcon" @click.stop>
              <div :class="item.leaf ? 'node-icon-leaf' : 'node-icon-directory'" @click.stop></div>
            </span>
            <span class="node-state" v-if="showState" @click.stop>
              <div :class="'node-state-icon ' + vtl_getNodeStateClassName(item.state)" @click.stop></div>
            </span>
          </div>
          <div class="node-content">
            <span
              :class="activedDisabled && item.actived ? 'node-label' : 'node-label'"
              @click.stop="vtl_handleLabelClick(item)"
            >
              <span class="node-label-text">{{item.name}}</span>
            </span>
          </div>
        </div>
      </template>
    </virtual-list>
  </div>
</template>

<script>
import virtualList from "vue-virtual-scroll-list";

export default {
  components: {
    "virtual-list": virtualList
  },
  name: "TreeList",
  props: {
    data: {
      type: [Array, Object],
      required: true
    },
    //　显示展开图标
    showExpand: {
      type: Boolean,
      default: true,
      required: false
    },
    // 显示选中图标
    showCheckbox: {
      type: Boolean,
      default: false,
      required: false
    },
    // 显示类型图标
    showIcon: {
      type: Boolean,
      default: false,
      required: false
    },
    // 显示状态图标
    showState: {
      type: Boolean,
      default: false,
      required: false
    },
    // 展开所有
    expandedAll: {
      type: Boolean,
      default: true,
      required: false
    },
    // 选中所有
    checkedAll: {
      type: Boolean,
      default: false,
      required: false
    },
    // 选中禁用
    checkedDisabled: {
      type: Boolean,
      default: false,
      required: false
    },
    // 选中禁用过滤
    filterCheckedDisabled: {
      type: Function,
      default: (data, index) => {
        return data;
      },
      required: false
    },
    // 启/禁用actived效果
    activedDisabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      itemHeight: 25,
      itemNum: 10,
      treeList: [],
      treeIndexes: {},
      treeTable: []
    };
  },
  computed: {
    tableList: function() {
      return this.treeTable.filter(item => {
        if (item.show && item.filter && item.search) {
          return true;
        }
        return false;
      });
    }
  },
  watch: {
    data: function(val, oldVal) {
      if (val) {
        this.treeList = this.vtl_deepRecursionTraversal(val);
        let tempList = JSON.parse(JSON.stringify(this.treeList));
        let temp = this.vtl_treeToArray(tempList);
        this.treeTable = temp.map((item, index) => {
          item.show = true;
          item.filter = true;
          item.search = true;
          item.actived = false;
          item.expanded = this.expandedAll ? true : false;
          item.checked = this.checkedAll ? true : false;
          item.indeterminate = false;
          // item.leaf = true;
          item.state = item.alarmLevel;
          item.disabled = this.checkedDisabled ? true : false;
          //
          this.treeIndexes[item["id"]] = index;
          //
          return item;
        });
      }
      //
      this.$emit(
        "vtl_dataChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes
      );
    }
  },
  created() {},
  mounted() {
    this.itemHeight = 25;
    this.itemNum = 10;
    this.itemNum = parseInt(
      document.getElementById("virtual-tree-list").clientHeight /
        this.itemHeight
    );
    // 监听窗口大小
    window.onresize = () => {
      this.itemHeight = 25;
      this.itemNum = parseInt(
        document.getElementById("virtual-tree-list").clientHeight /
          this.itemHeight
      );
    };
  },
  methods: {
    vtl_deepRecursionTraversal(node) {
      node.map(item => {
        if (item.children) {
          this.vtl_deepRecursionTraversal(item.children);
        } else {
          if (item.points) {
            // item.children = item.points;
            item.points = item.points.map(item => {
              item.id = "point_" + item.id;
              item.leaf = true;
              return item;
            });
            this.vtl_deepRecursionTraversal(item.points);
          } else {
            //
          }
        }
        return item;
      });
      return node;
    },
    //
    vtl_treeToArray(data) {
      let arr = [];
      let level = 0;
      //
      let rev = (node, level) => {
        for (let index = 0; index < node.length; index++) {
          node[index].level = level;
          arr.push(node[index]);
          if (node[index].children && node[index].children.length > 0) {
            rev(node[index].children, level + 1);
          }
          if (node[index].points && node[index].points.length > 0) {
            rev(node[index].points, level + 1);
          }
        }
      };
      //
      rev(data, 0);
      //
      return arr;
    },
    //
    vtl_getNodeStateClassName(value) {
      if (value === 0) {
        return "normal-icon";
      }
      if (value === 1) {
        return "warning-icon";
      }
      if (value === 2) {
        return "general-alarm-icon";
      }
      if (value === 3) {
        return "serious-alarm-icon";
      }
      if (value === 4) {
        return "danger-alarm-icon";
      }
      return "";
    },
    // 当前节点状态
    vtl_nodeCurrentStatus(data) {
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (this.treeTable[index].id == data.id) {
          this.treeTable[index].actived = !this.treeTable[index].actived;
          // data.actived = !data.actived;
        } else {
          this.treeTable[index].actived = false;
        }
      }
    },
    // 节点展开状态
    vtl_nodeExpandedStatus(data) {
      let rev = data => {
        if (data.modelLevel) {
          if (data.children && data.children.length > 0) {
            for (
              let index = 0, length = data.children.length;
              index < length;
              index++
            ) {
              if (data.show && data.expanded) {
                data.children[index].show = true;
              } else {
                data.children[index].show = false;
              }
              rev(data.children[index]);
            }
          }
          if (data.points && data.points.length > 0) {
            for (
              let index = 0, length = data.points.length;
              index < length;
              index++
            ) {
              if (data.show && data.expanded) {
                data.points[index].show = true;
              } else {
                data.points[index].show = false;
              }
              rev(data.points[index]);
            }
          }
        } else {
          //
        }
      };
      //
      rev(data);
    },
    // 节点勾选状态
    vtl_nodeCheckedStatus(data) {
      let revChild = data => {
        if (data.modelLevel) {
          if (data.children && data.children.length > 0) {
            for (
              let index = 0, length = data.children.length;
              index < length;
              index++
            ) {
              data.children[index].indeterminate = false;
              if (data.checked) {
                data.children[index].checked = true;
              } else {
                data.children[index].checked = false;
              }
              revChild(data.children[index]);
            }
          }
          if (data.points && data.points.length > 0) {
            for (
              let index = 0, length = data.points.length;
              index < length;
              index++
            ) {
              data.points[index].indeterminate = false;
              if (data.checked) {
                data.points[index].checked = true;
              } else {
                data.points[index].checked = false;
              }
              revChild(data.points[index]);
            }
          }
        } else {
          //
        }
      };
      //
      revChild(data);
      //--
      let revParent = data => {
        let index = this.treeIndexes[data.parentId];
        if (index >= 0) {
          let nNum = 0;
          let nIndeterminate = 0;
          let nChecked = 0;
          if (this.treeTable[index].modelLevel) {
            if (
              this.treeTable[index].children &&
              this.treeTable[index].children.length > 0
            ) {
              for (
                let childrenIndex = 0,
                  childrenLength = this.treeTable[index].children.length;
                childrenIndex < childrenLength;
                childrenIndex++
              ) {
                nNum += 1;
                if (
                  this.treeTable[index].children[childrenIndex].indeterminate
                ) {
                  nIndeterminate += 1;
                }
                if (this.treeTable[index].children[childrenIndex].checked) {
                  nChecked += 1;
                }
              }
            }
            if (
              this.treeTable[index].points &&
              this.treeTable[index].points.length > 0
            ) {
              for (
                let pointsIndex = 0,
                  pointsLength = this.treeTable[index].points.length;
                pointsIndex < pointsLength;
                pointsIndex++
              ) {
                nNum += 1;
                if (this.treeTable[index].points[pointsIndex].indeterminate) {
                  nIndeterminate += 1;
                }
                if (this.treeTable[index].points[pointsIndex].checked) {
                  nChecked += 1;
                }
              }
            }
            if (nIndeterminate <= 0 && nChecked <= 0) {
              this.treeTable[index].indeterminate = false;
              this.treeTable[index].checked = false;
            }
            if (nNum == nChecked) {
              this.treeTable[index].indeterminate = false;
              this.treeTable[index].checked = true;
            }
            if (
              (0 < nChecked && nChecked < nNum) ||
              (0 < nIndeterminate && nIndeterminate <= nNum)
            ) {
              this.treeTable[index].indeterminate = true;
              this.treeTable[index].checked = false;
            }
          } else {
            //
          }
          revParent(this.treeTable[index]);
        }
      };
      //
      revParent(data);
    },
    // --
    // 节点过滤
    vtl_nodesFilter(parameter) {
      let revParent = data => {
        let index = this.treeIndexes[data.parentId];
        if (index >= 0) {
          if (this.treeTable[index]) {
            this.treeTable[index].filter = true;
            revParent(this.treeTable[index]);
          }
        }
      };
      //
      let rev = (data, bFilter) => {
        if (data && data.length > 0) {
          for (
            let dataIndex = 0, length = data.length;
            dataIndex < length;
            dataIndex++
          ) {
            let index = this.treeIndexes[data[dataIndex].id];
            if (bFilter) {
              if (data[dataIndex].modelLevel) {
                if (data[dataIndex].modelLevel == 1000) {
                  this.treeTable[index].filter = true;
                  revParent(this.treeTable[index]);
                }
                if (data[dataIndex].modelLevel == 1010) {
                  if (
                    parameter.deviceAreasList.some(
                      item => item == data[dataIndex].id
                    ) ||
                    parameter.deviceAreasList.length <= 0
                  ) {
                    this.treeTable[index].filter = true;
                    revParent(this.treeTable[index]);
                  } else {
                    this.treeTable[index].filter = false;
                  }
                }
                if (data[dataIndex].modelLevel == 1100) {
                  this.treeTable[index].filter = true;
                  revParent(this.treeTable[index]);
                }
                if (data[dataIndex].modelLevel == 1150) {
                  this.treeTable[index].filter = true;
                  revParent(this.treeTable[index]);
                }
                if (data[dataIndex].modelLevel == 1200) {
                  if (
                    parameter.deviceTypeList.some(
                      item => item == data[dataIndex].deviceTypeId
                    ) ||
                    parameter.deviceTypeList.length <= 0
                  ) {
                    this.treeTable[index].filter = true;
                    revParent(this.treeTable[index]);
                  } else {
                    this.treeTable[index].filter = false;
                  }
                }
              } else {
                if (
                  (parameter.recognitionTypeList.some(
                    item => item == data[dataIndex].reconTypeId
                  ) ||
                    parameter.recognitionTypeList.length <= 0) &&
                  (data[dataIndex].reconTypeId != 1 ||
                    parameter.meterTypeList.some(
                      item => item == data[dataIndex].meterTypeId
                    ) ||
                    parameter.meterTypeList.length <= 0) &&
                  (data[dataIndex].reconTypeId != 3 ||
                    parameter.deviceAppearanceTypeList.some(
                      item => item == data[dataIndex].faceTypeId
                    ) ||
                    parameter.deviceAppearanceTypeList.length <= 0) &&
                  (parameter.useList.some(
                    item => item === data[dataIndex].isUse
                  ) ||
                    parameter.useList.length <= 0) &&
                  (parameter.pointType.some(
                    item => item == data[dataIndex].type
                  ) ||
                    parameter.pointType.length <= 0)
                ) {
                  this.treeTable[index].filter = true;
                  revParent(this.treeTable[index]);
                } else {
                  this.treeTable[index].filter = false;
                }
              }
            } else {
              this.treeTable[index].filter = false;
            }
            //
            if (data[dataIndex].modelLevel) {
              if (
                data[dataIndex].children &&
                data[dataIndex].children.length > 0
              ) {
                rev(data[dataIndex].children, this.treeTable[index].filter);
              }
              if (data[dataIndex].points && data[dataIndex].points.length > 0) {
                rev(data[dataIndex].points, this.treeTable[index].filter);
              }
            } else {
              //
            }
          }
        }
      };
      //
      rev(this.treeList, true);
    },
    // 节点搜索
    vtl_nodesSearch(parameter) {
      let revParent = data => {
        let index = this.treeIndexes[data.parentId];
        if (index >= 0) {
          if (this.treeTable[index]) {
            this.treeTable[index].search = true;
            revParent(this.treeTable[index]);
          }
        }
      };
      //
      let rev = (data, bSearch) => {
        if (data && data.length > 0) {
          for (
            let dataIndex = 0, length = data.length;
            dataIndex < length;
            dataIndex++
          ) {
            let index = this.treeIndexes[data[dataIndex].id];
            if (bSearch) {
              this.treeTable[index].search = true;
            } else {
              if (data[dataIndex].name.indexOf(parameter.str) != -1) {
                this.treeTable[index].search = true;
                revParent(this.treeTable[index]);
              } else {
                this.treeTable[index].search = false;
              }
            }
            //
            if (data[dataIndex].modelLevel) {
              if (
                data[dataIndex].children &&
                data[dataIndex].children.length > 0
              ) {
                rev(data[dataIndex].children, this.treeTable[index].search);
              }
              if (data[dataIndex].points && data[dataIndex].points.length > 0) {
                rev(data[dataIndex].points, this.treeTable[index].search);
              }
            } else {
              //
            }
          }
        }
      };
      //
      rev(this.treeList, false);
    },
    // 节点点击
    vtl_handleNodeClick(data) {
      //
      this.vtl_nodeCurrentStatus(data);
      //
      this.$emit(
        "vtl_nodeClick",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
      this.$emit(
        "vtl_nodeCurrentChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 展开收缩点击
    vtl_handleExpandClick(data) {
      data.expanded = !data.expanded;
      //
      this.vtl_nodeExpandedStatus(data);
      //
      this.$emit(
        "vtl_nodeExpandClick",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
      this.$emit(
        "vtl_nodeExpandedChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 选中点击
    vtl_handleCheckClick(data) {
      if (data.disabled) {
        return;
      }
      //
      data.indeterminate = false;
      data.checked = !data.checked;
      //
      this.vtl_nodeCheckedStatus(data);
      //
      this.$emit(
        "vtl_nodeCheckClick",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
      this.$emit(
        "vtl_nodeCheckedChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 标题点击
    vtl_handleLabelClick(data) {
      //
      this.vtl_nodeCurrentStatus(data);
      //
      this.$emit(
        "vtl_nodeLabelClick",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
      this.$emit(
        "vtl_nodeCurrentChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 获取指定节点
    vtl_getNode(data) {
      let index = this.treeIndexes[data.id];
      if (index >= 0) {
        return this.treeTable[index];
      }
      return null;
    },
    // 获取子节点
    vtl_getLeafNodes() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (
          this.treeTable[index].show &&
          this.treeTable[index].filter &&
          this.treeTable[index].search &&
          this.treeTable[index].leaf
        ) {
          temp.push(this.treeTable[index]);
        }
      }
      return temp;
    },
    // 获取子节点Id包括隐藏的
    vtl_getAllLeafNodesId() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (
          this.treeTable[index].filter &&
          this.treeTable[index].search &&
          this.treeTable[index].leaf
        ) {
          temp.push(this.treeTable[index].id);
        }
      }
      return temp;
    },
    // 获取子节点Id
    vtl_getLeafNodesId() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (
          this.treeTable[index].show &&
          this.treeTable[index].filter &&
          this.treeTable[index].search &&
          this.treeTable[index].leaf
        ) {
          temp.push(this.treeTable[index].id);
        }
      }
      return temp;
    },
    // 获取节点下的子节点
    vtl_getParentNodeLeafNodes(data) {
      let temp = [];
      //
      let revChild = data => {
        if (data.modelLevel) {
          if (data.children && data.children.length > 0) {
            for (
              let index = 0, length = data.children.length;
              index < length;
              index++
            ) {
              revChild(data.children[index]);
            }
          }
          if (data.points && data.points.length > 0) {
            for (
              let index = 0, length = data.points.length;
              index < length;
              index++
            ) {
              revChild(data.points[index]);
            }
          }
        } else {
          if (data.show && data.filter && data.search && data.leaf) {
            temp.push(data);
          }
        }
      };
      //
      revChild(data);
      //
      return temp;
    },
    // 获取节点下的子节点Id
    vtl_getParentNodeLeafNodesId(data) {
      let temp = [];
      //
      let revChild = data => {
        if (data.modelLevel) {
          if (data.children && data.children.length > 0) {
            for (
              let index = 0, length = data.children.length;
              index < length;
              index++
            ) {
              revChild(data.children[index]);
            }
          }
          if (data.points && data.points.length > 0) {
            for (
              let index = 0, length = data.points.length;
              index < length;
              index++
            ) {
              revChild(data.points[index]);
            }
          }
        } else {
          if (data.show && data.filter && data.search && data.leaf) {
            temp.push(data.id);
          }
        }
      };
      //
      revChild(data);
      //
      return temp;
    },
    // 获取当前节点
    vtl_getCurrentNode() {
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (this.treeTable[index].actived) {
          return this.treeTable[index];
        }
      }
      return null;
    },
    // 获取当前节点Id
    vtl_getCurrentNodeId() {
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (this.treeTable[index].actived) {
          return this.treeTable[index].id;
        }
      }
      return null;
    },
    // 设置当前节点
    vtl_setCurrentNode(data) {
      //
      this.vtl_nodeCurrentStatus(data);
      //
      this.$emit(
        "vtl_nodeCurrentChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 设置当前节点Id
    vtl_setCurrentNodeId(data) {
      // data.actived = !data.actived;
      //
      this.vtl_nodeCurrentStatus(data);
      //
      this.$emit(
        "vtl_nodeCurrentChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 获取选中节点
    vtl_getCheckedNodes() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (this.treeTable[index].checked) {
          temp.push(this.treeTable[index]);
        }
      }
      return temp;
    },
    // 获取选中节点Id
    vtl_getCheckedNodesId() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (this.treeTable[index].checked) {
          temp.push(this.treeTable[index].id);
        }
      }
      return temp;
    },
    // 获取半/选中节点
    vtl_getHalfCheckedNodes() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (
          this.treeTable[index].indeterminate ||
          this.treeTable[index].checked
        ) {
          temp.push(this.treeTable[index]);
        }
      }
      return temp;
    },
    // 获取半/选中节点Id
    vtl_getHalfCheckedNodesId() {
      let temp = [];
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        if (
          this.treeTable[index].indeterminate ||
          this.treeTable[index].checked
        ) {
          temp.push(this.treeTable[index].id);
        }
      }
      return temp;
    },
    // 设置选中节点
    vtl_setCheckedNodes(data) {
      //
      this.$emit(
        "vtl_nodeCheckedChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 设置选中节点Id
    vtl_setCheckedNodesId(data) {
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        this.treeTable[index].indeterminate = false;
        this.treeTable[index].checked = false;
      }
      //
      for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
        let index = this.treeIndexes[data[dataIndex]];
        if (index || index == 0) {
          this.treeTable[index].indeterminate = false;
          this.treeTable[index].checked = true;
          //
          this.vtl_nodeCheckedStatus(this.treeTable[index]);
        }
      }
      //
      this.$emit(
        "vtl_nodeCheckedChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 设置选中/取消选中节点Id
    vtl_setCheckedNodesSingleId(data) {
      if (!(data instanceof Object)) return;
      let index = this.treeIndexes[data.id];
      if (index || index == 0) {
        this.vtl_handleCheckClick(this.treeTable[index]);
      }
      //
      this.$emit(
        "vtl_nodeCheckedChange",
        this.treeList,
        this.treeTable,
        this.treeIndexes,
        data
      );
    },
    // 设置Check禁用Id
    vtl_setCheckedDisabledNodesId(data) {
      for (
        let index = 0, length = this.treeTable.length;
        index < length;
        index++
      ) {
        this.treeTable[index].disabled = false;
      }
      //
      for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
        let index = this.treeIndexes[data[dataIndex]];
        if (index || index == 0) {
          this.treeTable[index].disabled = true;
        }
      }
    }
  }
};
</script>

<style>
.VirtualTreeList {
  width: auto;
  height: 100%;
}
/*  */
.node-item {
  width: auto;
  height: 25px;
  display: block;
  white-space: nowrap;
  clear: both;
}
.node-item-active {
  background-color: #ecf5ff;
}
/*  */
.node-operation {
  width: auto;
  height: 25px;
  display: inline-block;
}
/*  */
.node-expand {
  width: 23px;
  height: 25px;
  float: left;
}
.node-expand-icon {
  width: 16px;
  height: 16px;
  margin: 4px 3px;
  cursor: pointer;
  color: #c0c4cc;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.node-expanded {
  transform: rotate(90deg);
}
/*  */
.node-checkbox {
  width: 21px;
  height: 25px;
  float: left;
}
.node-checkbox-border {
  width: 15px;
  height: 15px;
  margin: 5px 3px;
  border: 1px solid #c0c4cc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.node-checkbox-border-disabled {
  border: 1px solid #dfdfdf;
  cursor: not-allowed;
}
.node-checkbox-normal {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
}
.node-checkbox-normal::after {
  /*  */
}
.node-checkbox-normal-disabled {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background-color: #efefef;
}
.node-checkbox-normal-disabled::after {
  /*  */
}
.node-checkbox-checked {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
  /* background-color: #109cb4; */
  background-color: #409eff;
}
.node-checkbox-checked::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 12%;
  width: 69%;
  height: 41%;
  border: 2px solid #ffffff;
  border-radius: 2px;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.node-checkbox-checked-disabled {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background-color: #efefef;
}
.node-checkbox-checked-disabled::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 12%;
  width: 69%;
  height: 41%;
  border: 2px solid #afafaf;
  border-radius: 2px;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.node-checkbox-indeterminate {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
  /* background-color: #109cb4; */
  background-color: #409eff;
}
.node-checkbox-indeterminate::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 20%;
  width: 60%;
  height: 2px;
  border: 1px solid #ffffff;
  border-radius: 2px;
  border-left: none;
  border-right: none;
}
.node-checkbox-indeterminate-disabled {
  position: absolute;
  /* display: inline-block; */
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background-color: #efefef;
}
.node-checkbox-indeterminate-disabled::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 20%;
  width: 60%;
  height: 2px;
  border: 1px solid #afafaf;
  border-radius: 2px;
  border-left: none;
  border-right: none;
}
/*  */
.node-icon {
  width: 21px;
  height: 25px;
  float: left;
}
.node-icon-directory {
  width: 15px;
  height: 15px;
  margin: 5px 3px;
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
}
.node-icon-leaf {
  width: 15px;
  height: 15px;
  margin: 5px 3px;
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
}
/*  */
.node-state {
  width: 21px;
  height: 25px;
  float: left;
}
.node-state-icon {
  width: 13px;
  height: 13px;
  margin: 6px 3px;
}
.normal-icon {
  background-color: rgb(50, 150, 50);
}
.warning-icon {
  background-color: rgb(0, 0, 255);
}
.general-alarm-icon {
  background-color: rgb(255, 255, 0);
}
.serious-alarm-icon {
  background-color: rgb(255, 128, 10);
}
.danger-alarm-icon {
  background-color: rgb(155, 0, 0);
}
/*  */
.node-content {
  width: auto;
  height: 25px;
  display: inline-block;
}
/*  */
.node-label {
  width: auto;
  height: 25px;
  float: left;
}
.node-label-active {
  padding: 0 6px;
  background-color: #e0e5f5;
  border-radius: 2px;
}
.node-label-text {
  width: auto;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  cursor: default;
  display: inline-block;
}
</style>